<template>
  <div class="batchBox">
    <div class="conMsg">
      <div class="top">
        <div class="title">
          <i class="el-icon-collection-tag" />基本资料
        </div>
      </div>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label">状态</template>
          <span v-if="detail.status == 1 ">激活</span>
          <span v-if="detail.status == 2 ">禁用</span>
          <span v-if="detail.status == 3 ">离职</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="detail.status == 2">
          <template slot="label">禁用原因</template>
          {{detail.reason}}
        </el-descriptions-item>
        <el-descriptions-item v-if="detail.status == 3">
          <template slot="label">离职时间</template>
          {{detail.leaveAt}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">所在门店</template>
          {{detail.shopName?detail.shopName:'暂无'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">员工姓名</template>
          {{detail.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">员工身份证号</template>
          {{detail.idNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">员工电话</template>
          {{detail.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">员工年龄</template>
          {{detail.age}}岁
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">性别</template>
          {{detail.sex}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">职位</template>
          {{detail.stationName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">岗位</template>
          {{detail.positionName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">员工生日</template>
          {{detail.birthday}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">入职时间</template>
          {{detail.entryAt}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">工龄</template>
          {{detail.jobAge}}年
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">试用期</template>
          {{detail.probation}}月
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">是否参与预约</template>
          {{detail.isReservation > 0 ? '是' : '否'}}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label">试用期</template>
          {{detail.probation}}月
        </el-descriptions-item> -->

      </el-descriptions>
       <div class="top" style="margin: 20px 0;">
          <div class="title">
            <i class="el-icon-collection-tag" />签名列表
          </div>
        <el-popover
          placement="right"
          width="200"
          trigger="click">
            <el-button @click="addSign()"   slot="reference" type="primary" size="small" >添加签名</el-button>
            <div id="qrCode" ref="qrCode"></div>
        </el-popover>
      </div>
      <div  style="display: flex;column-gap: 30px;">
          <el-card  v-for="(item,index) in sign" :key="index" style="width: 240px;">
            <div>
                <img :src="'data:image/png;base64,' + item.sign_img" alt="签名图片">
            </div>
            <div style="text-align: right;">
              <span
                  class="theme ml20"
                  v-if="item.is_default != 1"
                  @click="hint('设为默认签名',item.sign_id)"
                
                >默认签名</span>
                <span
                  class="theme ml20"
                  @click="hint('删除二维码',item.sign_id)"
                >删 除</span>
            </div>
          </el-card>
      </div>
     
    </div>
  </div>
</template>

<script>
import { staffDetail,getSignList,createWritePadUrl,personSignDel,personSignDefault} from "@/api/staff";
import QRCode from "qrcodejs2";
class Detail {
  status = 1;
  reason = "";
  shopId = "";
  name = "";
  phone = "";
  age = "";
  sex = "男";
  stationId = "";
  stationName = "";
  positionId = "";
  positionName = "";
  birthday = "";
  entryAt = "";
  jobAge = "";
  probation = "";
  leaveAt = "";
  isReservation = "";
}

class Page {
  total = 0;
  page = 1;
  limit = 10;
}
export default {
  name: "AddStaff",
  components: {},

  data() {
    return {
      detail: new Detail(),
      list: [], // 门店展示
      sign: [],
      active: 0,
      shopName: "",
      phoneImageUrl:'',
      dialogVisible: false,
      popVisible:false
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    addSign(){
      createWritePadUrl({ person_id: this.$route.query.id }).then(res=>{
          // console.log('生成支付二维码的链接：'+this.$refs.qrCode);
          this.$refs.qrCode.innerHTML = "";
          var qrcode = new QRCode(this.$refs.qrCode, {
            // text: 'xxxx', // 需要转换为二维码的内容
            text: res.handWritingUrl, // 需要转换为二维码的内容
            width: 150,
            height: 150,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        });
      setTimeout(() => {
          this.getDetail();
      }, 30000);
    },
    hint(text,sign_id) {
      this.$confirm(`${text},是否确定？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if(text == '删除二维码'){
          this.del(sign_id);
        }else{
          this.personSignDefault(sign_id);
        }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    del(sign_id){
        personSignDel({person_id: this.$route.query.id,sign_id:sign_id}).then(res=>{
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.getSignList();
        })
    },
    personSignDefault(sign_id){
       personSignDefault({person_id: this.$route.query.id,sign_id:sign_id}).then(res=>{
          this.$message({
            type: "success",
            message: "设置成功"
          });
          this.getSignList();
        })
    },
    // 获取详情
    getDetail() {
      staffDetail({ id: this.$route.query.id }).then(res => {
        this.detail = res;
      });
      this.getSignList();
    },
    getSignList(){
      getSignList({person_id: this.$route.query.id }).then(res=>{
        console.log(res,"res")
        this.sign = res.list
      })
    }
    
  }
};
</script>

<style lang="scss" scoped>
.conMsg {
  margin-bottom: 30px;
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: bold;
      font-size: 14px;
      line-height: 34px;
      color: #666;
    }
  }
}
::v-deep .el-descriptions-item__label.is-bordered-label {
  background: #f9fafc;
}
</style>
